<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <style type="text/css">
			*{
				padding: 0;
				margin: 0;
				border: 0;
			}
			html,body{
				height: auto;
				background: #fff;
				max-height: 10rem;
			}
			.wam{
				width: 100%;
				background: url(1_02.jpg) no-repeat; 
				background-size: cover;
				background: #fff
			}
			button,input,textarea{ outline:none;resize:none;}
        </style> 
        <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
        <!-- <script type="text/javascript" src="1.js"></script> -->
		<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

        <script  type="text/javascript">
        $(document).ready( function(){
//function toggleFullScreen() {  
//  if (!document.fullscreenElement && // alternative standard method  
//      !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods  
//      if (document.documentElement.requestFullscreen) {  
//          document.documentElement.requestFullscreen();  
//      } else if (document.documentElement.mozRequestFullScreen) {  
//          document.documentElement.mozRequestFullScreen();  
//      } else if (document.documentElement.webkitRequestFullscreen) {  
//          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);  
//      }  
//  } else {  
//      if (document.cancelFullScreen) {  
//          document.cancelFullScreen();  
//      } else if (document.mozCancelFullScreen) {  
//          document.mozCancelFullScreen();  
//      } else if (document.webkitCancelFullScreen) {  
//          document.webkitCancelFullScreen();  
//      }  
//  }  
//}          	
(function(win){
				var ratio,scaleValue,renderTime,
						document=window.document,
						docElem=document.documentElement,
						vpm=document.querySelector('meta[name="viewport"]');
				if(vpm){
					var tempArray=vpm.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
					if(tempArray){
						scaleValue=parseFloat(tempArray[2]);
						ratio=parseInt(1/scaleValue);
					}
				}else{
					vpm=document.createElement("meta");
					vpm.setAttribute("name","viewport");
					vpm.setAttribute("content","width=device-width,initial-scale=1,user-scalable=no,minimal-ui");
					docElem.firstElementChild.appendChild(vpm);
				}

				win.addEventListener("resize",function(){
					clearTimeout(renderTime);
					renderTime=setTimeout(initPage,300);
				},false);

				win.addEventListener("pageshow", function(e) {
					e.persisted && (clearTimeout(renderTime),renderTime=setTimeout(initPage,300));
				}, false);

				"complete"===document.readyState?document.body.style.fontSize =12*ratio+"px":
						document.addEventListener("DOMContentLoaded",function(){
							document.body.style.fontSize =12*ratio+"px";
						},false);
				initPage();
				function initPage(){
					var htmlWidth=docElem.getBoundingClientRect().width;
					if(htmlWidth>640) htmlWidth=640;
					htmlWidth/ratio>640 && (htmlWidth=640*ratio);
					win.rem=htmlWidth/16;
					docElem.style.fontSize=win.rem+"px";
				}
			})(window);
        	function random(min,max){
				return Math.round(Math.random()*(max-min)+min)
			}
        	var num = random(1000,10000);
        	$("p").html(num)
        	// console.log(num)
                $(".example1").on("click", function(event) {
//                  toggleFullScreen();
                    var dd = $("#vu").val()
//                  alert(dd)
                    $("#h1").html(dd) 
                    $("#img1").css('display','none')
                    $("#img2").css('display','block')
                    $("#h1").css('display','block')
                    $(".dibu").css('display','none')
                    $("#p1").css('display','none')
                    $("#p2").css('display','block')
                	// myFunction()
//                      
                		setTimeout(function(){
//                			 alert("Hello")
                            event.preventDefault();
                            html2canvas(document.body, {
                                allowTaint: true,
                                taintTest: false,
                                onrendered: function(canvas) {
                                    canvas.id = "mycanvas";
                                    //document.body.appendChild(canvas);
                                    //生成base64图片数据
                                    var dataUrl = canvas.toDataURL();
                                    var newImg = document.createElement("img");
                                    newImg.src =  dataUrl;
                                    document.body.appendChild(newImg);
                                }
                            })
                            setTimeout(function(){
                                $(".wam").css('display','none')
                                $("#p1").css('display','none')
                                $("#p2").css('display','none')
                                $("#h1").css('display','none')
                             },100); 
                		},100);
                        
                }); 
        });
         
        </script>
    </head>
    <body>
        <p id="p1" style="position: absolute;margin-top:3.4rem;font-size:0.7rem;margin-left:4.6rem; "></p>
        <p id="p2" style="position: absolute;margin-top:8.4rem;font-size:0.7rem;margin-left:4.5rem;display: none;"></p>
        <h1 id="h1" style="position: absolute;width: 100%;text-align: center;font-size: 0.7rem;font-weight: normal;margin-top: 7.2rem;display: none;">111</h1>
        <div class="wam"  style="width:100%;height: 100%;min-height: 12rem;">
            <img src="5_02.jpg" id="img1" style="width: 100%;">
            <img src="9.png" id="img2" style="width: 100%;display: none;"/>
            <div style="clear: both;"></div>
            <div class="dibu" style="width: 100%;height: 7rem;background: #FFFFFF;position: fixed;bottom:0;">
                <input type="text" id="vu" placeholder="请输入你名字" style="width: 11.675rem;height: 2.05rem;margin-top:1rem;margin-left:2.1rem;posit2ion: fixed;bottom: 4rem;left: 2rem;border-radius: 1rem;border: 1px solid #ccc;text-align: center"></input>
                <!-- <input class="example1" type="button" value="button"> -->
                <button class="example1" style="width: 11.675rem;height: 2.05rem;margin-top:0.5rem;margin-left:2.1rem;posit2ion: fixed;bottom: 1.5rem;left:2rem;border-radius: 1rem;background: #1C82D4;text-align: center;color:#fff;font-size: 0.7rem;">一键生成</button>
            </div>
        </div>
         
    </body>
</html>